<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>

<link rel="stylesheet" href="<%=basePath%>/lib/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=basePath%>/lib/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/ztree/jquery.ztree.excheck.min.js"></script>
<style type="text/css">
	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	.app-container{
		width: 100%;
		border-left: 1px solid #d9d9d9;
	}
	#appiframe{
		width: 100%;
		height: 100% ;
	}
</style>
</head>
<body>
	<div>
		<div>
			<!-- 左边栏 -->
			<div class="float-left " style="width:170px;">
				<div class="prolist">
					<span>Configuration list</span>
				</div>
				<ul id="treeDemo" class="ztree"></ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<iframe id="appiframe" src=""></iframe>				
				</div>
			</div>
	</div>
</body>
<script type="text/javascript">
	
	//树形结构
	//结构介绍：节点node的type类型：1项目  2场景  3设备
	var zTreeObj;		 // 左侧树形结构
	var zNodes = [];
	var pid_sceneMap={};//根据项目Id 取出项目下的场景
	var setting = {
		view : {
			showLine : false,
			showIcon : false
		},
		callback : { //回调函数                              
			onClick : showDevice
		}
	};
	
	function showDevice(event, treeId, treeNode) {
		var nodes = zTreeObj.getSelectedNodes();
		if (nodes != undefined && nodes.length > 0) {
			var node = nodes[0];
			if( node.keycode != null  ){
				$("#appiframe").attr("src" , basePath+ "/page/visual/show.html?keyCode="+ node.keycode ) ;
			}
		}
	}
	
	//树初始化
	function initTree() {
		zNodes = [];  
		$("#treeDemo").children().remove();
		commonAjax("POST", localUrl + "/scene/visual.json?paged=1&page_size=999", {dis_type: 0},
			function(data) { 
				if (data.status == "2") {
					var all = { name:'全部项目', tree_type:1}
					var dt = data.data ;
					for(var i = 0; i< dt.length ; i++ ){
						dt[i].children = dt[i].visualList ;
					}
					all.children = dt ;
					zNodes = [ all ]; 
					zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
					if(zNodes.length>0){
						var children = zNodes[0].children;
						var current_id = children[0].id;
						var node = filterNodeByIdAndType(current_id);
						initTreeExpand(zTreeObj,node);
					}
				}
			}, function() {
				showTip("error");
			})
	}

	function initTreeExpand(tree,node){
		//关闭所有节点
		tree.expandAll(false);
		/* 获取所有树节点 */
	    var nodes = tree.transformToArray(tree.getNodes());
	    //展开第一级树
	    tree.expandNode(nodes[0], true);
	    //展开指定节点
	    if(node!=null){
	    	if(node.children != null && node.children.length > 0 ){
	    		var children = node.children;
				var current_id = children[0].id;
				var node = filterNodeByIdAndType(current_id);		
				tree.selectNode(node);
				
				// 这边加载iframe信息
				$("#appiframe").attr("src" ,basePath+ "/page/visual/show.html?keyCode="+ node.keycode ) ;
	    	}else{
	    		tree.selectNode(node);
	    	}
	    	tree.expandNode(node, true, true,false);
	    }
	}
	//筛选出id为 的节点
	function filterNodeByIdAndType(id){
		var node = zTreeObj.getNodesByFilter(function(node){
			return node.id==id;
		}, true)
		return node;
	}
	
	$(function(){
		initTree(); 
	})
	
</script>
</html>